<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // async 和 await
        //依次执行异步代码
        function fn1() {
            return new Promise(res => {
                setTimeout(() => {
                    console.log(1);
                    res(111)
                }, 1000);
            })
        }

        function fn2() {
            return new Promise((res, rej) => {
                setTimeout(() => {
                    console.log(2);
                    res(222);
                    // rej("第二个错误")
                }, 1000);
            })
        }

        function fn3() {
            return new Promise((res, rej) => {
                setTimeout(() => {
                    console.log(3);
                    res(333);
                }, 1000);
            });
        }

        //ES6里链式操作
        // fn1().then(res=>{
        //     console.log(res);
        //     return fn2();
        // }).then(res=>{
        //     console.log(res);
        //     return fn3();
        // }).then(res=>{
        //     console.log(res);
        // }).catch(err=>{console.log(err)})


        //ES8 通过 async 和 await 把 调用简写
        //提供一种语法糖:利用同步语法 书写异步
        async function myfn() {
            try {
                // await 会等待promise 里面的resolve 或者 reject执行之后再执行下面代码
                let res1 = await fn1();
                console.log(res1);
                let res2 = await fn2();
                let res3 = await fn3();
                console.log(res3);
            } catch (err) {
                console.log("error: ", err);
            }
        }
        myfn();

        //1.await 后面是一个promise对象, await 一定要在async函数里,不能单独存在
        //2.async 和 await 不能出现嵌套关系

        let arr = [fn1, fn2, fn3];
        async function myfn(arr) {
            for (let val of arr) {
                await val();
            }
        }
        myfn(arr);
    </script>
</body>

</html>